<template>
  <div class="font16 color999 mt5" v-if="labInfo" v-click-outside="closeLableHandle">
    <!-- labInfo -->
    <div v-if="!labInfo.length">
      <span @click="addLable" class="curPointer font12 line17">添加标签</span>
      <img @click="addLable" src="../../../assets/img/pen_edit.png" alt=""
           class="inlineblock width10 height10 ml6 line17"/>
    </div>
    <div v-else>
      <label-info-small :sliceLength="7" :labelInfo="labInfoName"></label-info-small>
      <span @click="addLable" class=" curPointer inlineblock width10 height10 line17 ml6">
                  <img src="../../../assets/img/pen_edit.png" alt=""
                       style="width: 100%; height: 100%"/>
                </span>
    </div>
    <!-- 选择标签弹出框 -->
    <div class="lableBox bgFFF" v-if="lableStatus">
      <div class="lableBox_qy pt10 pl11 pr11 pb16">
        <div class="title height26 font12 color333 pl10 mb10 fontwBold">
          客户标签
        </div>
        <div class="typeItem pl10" v-for="(item, index) in lableListData" :key="index">
          <div class="mt10 font12 color333 fontwBold">{{ item.tagName }}</div>
          <div class="pb10 btn_items font12 color666">
            <Button class="mr10 mt10 selectLableAll" v-for="(itm, ind) in item.children" :key="ind"
                    @click="selectLable(index,ind,itm)" :class="itm.isClicked ? 'activeBtn' : ''">{{ itm.tagName }}
            </Button>
          </div>
        </div>
      </div>
      <div class="lableBtn tr pr20 pt10">
        <Button class="mr10" @click="closeLableHandle">取消</Button>
        <Button type="primary" @click="comingHandle">确认</Button>
      </div>
    </div>
  </div>
</template>

<script>
import "@/libs/directive";
import labelInfoSmall from "_c/labelInfo/labelInfoSmall";

export default {
  components: {
    labelInfoSmall,
  },
  props: {
    labInfo: {
      type: Array,
      default() {
        return [];
      }
    },
    someoneData: {
      type: Object,
      default() {
        return {};
      }
    },
  },
  data() {
    return {
      lableStatus: false, // 添加标签框
      lableListData: [], // 标签数据
    }
  },
  computed: {
    labInfoName() {
      return this.labInfo.map(item => item.tagName)
    }
  },
  methods: {
    // 添加标签
    addLable() {
      this.lableStatus = !this.lableStatus;
      this.getTagList();
    },
    // 获取标签
    getTagList() {
      if (this.lableListData.length) {
        this.lableListData.map(res => {
          res.children.map((item) => {
            item.isClicked = this.labInfo.find(v => v.id == item.id) ? true : false;
            return item;
          })
        })
      } else {
        this.APIS.tagList().then((res) => {
          this.lableListData = this.handleTree(res.data);

          this.lableListData.map(res => {
            res.children.map((item) => {
              item.isClicked = this.labInfo.find(v => v.id == item.id) ? true : false;
              return item;
            })
          })
        });
      }
    },
    // 添加标签 确认按钮
    comingHandle() {
      let comDatas = []; //获取选中的标签
      this.lableListData.map((res) => {
        res.children.map((item) => {
          if (item.isClicked === true) {
            comDatas.push(item.id);
          }
        });
      });
      if (!comDatas || !comDatas.length) {
        this.$Message.warning("请选择标签");
        return;
      }
      this.APIS.residentUpdate({
        id: this.someoneData.redientId || this.someoneData.redidentId || this.someoneData.id,
        tagIdList: comDatas
      }).then((res) => {
        if (res.code == 20000) {
          this.$Message.success("保存成功");
          this.lableStatus = false;
          // 重新加载数据
          this.$emit("labelSaveSuccess", true);
        } else {
          this.$Message.error(res.message)
        }
      });
    },
    // 关闭添加标签框
    closeLableHandle() {
      this.lableStatus = false;
    },
    //点击标签
    selectLable(index, ind, itm) {
      if (itm.isClicked) {
        this.$delete(this.lableListData[index].children[ind], 'isClicked');
        this.$set(this.lableListData[index].children[ind], 'isClicked', false);
      } else {
        this.$delete(this.lableListData[index].children[ind], 'isClicked');
        this.$set(this.lableListData[index].children[ind], 'isClicked', true);
      }
    },
  }
}
</script>

<style scoped lang="less">
.lableBox {
  width: 520px;
  height: 355px;
  position: absolute;
  z-index: 99;
  border: 1px solid #E8E8E8;
  box-shadow: 0px 2px 7px 0px rgba(24, 42, 55, 0.15);

  .lableBox_qy {
    width: 100%;
    height: 85%;
    overflow-y: auto;

    .title {
      width: 98%;
      //background-color: #f8f8f8;
      line-height: 26px;
    }

    .typeItem {
      //border-bottom: 1px solid #d9d9d9;
      .selectLableAll {
        height: 24px !important;
        color: #666 !important;
        font-size: 12px !important;
      }

      .activeBtn {
        background-color: #2d8cf0;
        color: #fff !important;
        border-color: #2d8cf0;
      }
    }

    .typeItem:last-child {
      border-bottom: none;
    }

    .typeItem .ivu-radio-group-button .ivu-radio-wrapper {
      margin-right: 10px;
      border-radius: 4px;
    }
  }

  .lableBtn {
    border-top: 1px solid #e6e6e6;

    .ivu-btn {
      height: 31px !important;
    }
  }

}
</style>
